Toolbar, Floating Action Button (FAB), এবং Navigation Drawer

Toolbar, Floating Action Button (FAB), এবং Navigation Drawer হল Android অ্যাপ্লিকেশন ইন্টারফেসের সাধারণ উপাদান, যা অ্যাপ্লিকেশনকে ব্যবহারকারী বান্ধব এবং ইন্টারেক্টিভ করে তোলে। এগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের ইউজার ইন্টারফেসে কার্যকরী এবং নেভিগেশন ফিচার যোগ করতে পারেন। 

Toolbar, Floating Action Button (FAB), এবং Navigation Drawer

নিচে প্রত্যেকটি উপাদান নিয়ে বিস্তারিত আলোচনা এবং উদাহরণ দেওয়া হয়েছে।

১. Toolbar

Toolbar হল Android অ্যাপ্লিকেশনের একটি উপাদান, যা সাধারণত অ্যাপের উপরের দিকে থাকে এবং এতে টাইটেল, মেনু আইটেম, সার্চ বার, এবং অন্যান্য একশন বা আইকন দেখা যায়। এটি ActionBar এর একটি কাস্টমাইজেবল সংস্করণ।

Toolbar সেটআপ করা

Gradle ফাইলে Material Components ডিপেনডেন্সি যোগ করুন:

implementation 'com.google.android.material:material:1.9.0'

XML এ Toolbar যোগ করা

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="My Toolbar"
    app:titleTextColor="@android:color/white"/>

Activity এ Toolbar সেটআপ করা

import androidx.appcompat.widget.Toolbar;

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

এখানে MaterialToolbar ব্যবহার করে একটি কাস্টম Toolbar সেটআপ করা হয়েছে। setSupportActionBar() মেথড ব্যবহার করে এটিকে অ্যাপের ActionBar হিসেবে সেট করা হয়েছে।

২. Floating Action Button (FAB)

Floating Action Button (FAB) হল একটি সোজাসাপ্টা, গোলাকার বোতাম যা অ্যাপ্লিকেশনের স্ক্রিনের উপর ভেসে থাকে এবং সাধারণত একটি প্রাইমারি অ্যাকশন সম্পাদনের জন্য ব্যবহৃত হয়। এটি Material Design এর একটি অংশ।

XML এ FAB যোগ করা

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add"
    android:contentDescription="Add"
    app:backgroundTint="@color/colorAccent"/>

এখানে FloatingActionButton ব্যবহার করে একটি FAB যোগ করা হয়েছে। এটি bottom|end পজিশনে রাখা হয়েছে যাতে এটি স্ক্রিনের নিচের ডানদিকে প্রদর্শিত হয়।

FAB এর ক্লিক ইভেন্ট হ্যান্ডল করা

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(view -> {
    // FAB ক্লিক করার সময় করণীয় কাজ
    Snackbar.make(view, "FAB clicked!", Snackbar.LENGTH_LONG).show();
});

এখানে FloatingActionButton এর setOnClickListener() মেথড ব্যবহার করে ক্লিক ইভেন্ট হ্যান্ডল করা হয়েছে। Snackbar ব্যবহার করে একটি মেসেজ প্রদর্শন করা হয়েছে।

৩. Navigation Drawer

Navigation Drawer হল একটি ড্রয়ার বা সাইড মেনু, যা স্ক্রিনের বাঁ দিক থেকে স্লাইড করে আসে এবং ব্যবহারকারীকে অ্যাপ্লিকেশনের বিভিন্ন অংশে নেভিগেট করতে সাহায্য করে। এটি সাধারণত DrawerLayout এবং NavigationView ব্যবহার করে তৈরি করা হয়।

Step 1: XML এ DrawerLayout এবং NavigationView যোগ করা

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="My App"
            app:titleTextColor="@android:color/white"/>

        <!-- Content area -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

এখানে DrawerLayout এর ভেতরে একটি NavigationView যোগ করা হয়েছে। app

অ্যাট্রিবিউটের মাধ্যমে একটি মেনু রিসোর্স সেট করা হয়েছে, যা ড্রয়ারে প্রদর্শিত হবে।

Step 2: Menu Resource (drawer_menu.xml) তৈরি করা

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:title="Home"
        android:icon="@drawable/ic_home"/>
    <item
        android:id="@+id/nav_settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings"/>
</menu>

res/menu ডিরেক্টরিতে drawer_menu.xml ফাইল তৈরি করে মেনু আইটেম যোগ করা হয়েছে।

Step 3: Activity এ Navigation Drawer সেটআপ করা

import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.drawerlayout.widget.DrawerLayout;
import com.google.android.material.navigation.NavigationView;

DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
Toolbar toolbar = findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

// Drawer টগল বাটন সেটআপ করা
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();

// মেনু আইটেম ক্লিক ইভেন্ট হ্যান্ডল করা
navigationView.setNavigationItemSelectedListener(item -> {
    switch (item.getItemId()) {
        case R.id.nav_home:
            // Home এ নেভিগেট করা
            break;
        case R.id.nav_settings:
            // Settings এ নেভিগেট করা
            break;
    }
    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
});

এখানে ActionBarDrawerToggle ব্যবহার করে ড্রয়ার টগল সেটআপ করা হয়েছে, যাতে Toolbar এর টগল বাটন ক্লিক করলে ড্রয়ার খোলে বা বন্ধ হয়। setNavigationItemSelectedListener() মেথডের মাধ্যমে মেনু আইটেমের ক্লিক ইভেন্ট হ্যান্ডল করা হয়েছে।

৪. Toolbar, FAB, এবং Navigation Drawer একত্রে ব্যবহারের উদাহরণ

নিচে একটি সাধারণ উদাহরণ দেখানো হয়েছে যেখানে একটি অ্যাপ্লিকেশনে Toolbar, FAB, এবং Navigation Drawer একত্রে ব্যবহার করা হয়েছে।

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="My App"/>

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
            
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_add"/>
    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

এই উদাহরণে, Toolbar, FloatingActionButton, এবং NavigationView একত্রে ব্যবহৃত হয়েছে। এটি একটি সাধারণ Layout যেখানে আপনি একটি অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ইন্টারেক্টিভ করে তুলতে পারেন।

উপসংহার

Toolbar, Floating Action Button (FAB), এবং Navigation Drawer Android অ্যাপ্লিকেশনের ইন্টারফেসে কার্যকরী এবং ব্যবহারকারী বান্ধব উপাদান যোগ করতে অত্যন্ত গুরুত্বপূর্ণ।

• Toolbar অ্যাপ্লিকেশনের শিরোনাম, মেনু আইটেম, এবং অ্যাকশনগুলি প্রদর্শন করার একটি কাস্টমাইজেবল উপায় প্রদান করে, যা অ্যাপ্লিকেশনের পরিচ্ছন্ন এবং সুসংহত লেআউট নিশ্চিত করে।
• Floating Action Button (FAB) ব্যবহার করে প্রাইমারি অ্যাকশন বা গুরুত্বপূর্ণ কাজগুলি দ্রুত অ্যাক্সেস করা যায়। এটি একটি সহজবোধ্য এবং আকর্ষণীয় উপাদান যা Material Design এর অংশ।
• Navigation Drawer ব্যবহার করে অ্যাপ্লিকেশনে বিভিন্ন অংশ বা স্ক্রিনে নেভিগেট করা সহজ হয়। এটি বিশেষ করে বড় অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত, যেখানে অনেকগুলো সেকশন বা ফিচার থাকে।

এই উপাদানগুলির সঠিক এবং সৃজনশীল ব্যবহারের মাধ্যমে Android অ্যাপ্লিকেশনকে আরও ব্যবহারকারী বান্ধব, কার্যকরী, এবং আকর্ষণীয় করে তোলা সম্ভব। অ্যাপ্লিকেশনের নেভিগেশন সহজ করতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এই উপাদানগুলো একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।